<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库区管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <!-- 上部的查询表单 -->
    <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
        <el-form-item label="仓库名称" prop="wareName">
            <el-select v-model="formInline.wareName" placeholder="请选择仓库">
                <el-option
                        v-for="item in wareHouseList"
                        :key="item.id"
                        :label="item.wareName"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="货区名称" prop="cargoArea">
            <el-select v-model="formInline.cargoArea" placeholder="请选择货区">
                <el-option
                        v-for="item in caregoAreaList"
                        :key="item.id"
                        :label="item.goodsName"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
            <div class="block">
                <el-date-picker
                        v-model="formInline.createTime"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="inlineFormSelect('formInline')">查询</el-button>
            <el-button @click="inlineFormReset('formInline')">重置</el-button>
        </el-form-item>
    </el-form>

    <!-- 新增按钮 对话框 -->
    <el-row style="padding-top: 10px">
        <el-col :span="6">
            <el-button type="primary" plain icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">新增货区
            </el-button>
        </el-col>

        <!--对话框-->
        <el-dialog title="货区信息" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="form" ref="form">
                <el-form-item
                        label="货区编号"
                        prop="goodsNo"
                        :label-width="formLabelWidth">
                    <el-input v-model="form.goodsNo" placeholder="请输入货区编号" clearable></el-input>
                </el-form-item>
                <el-form-item
                        label="货区名称"
                        prop="goodsName"
                        :label-width="formLabelWidth">
                    <el-input v-model="form.goodsName" placeholder="请输入货区名称" clearable></el-input>
                </el-form-item>
                <el-form-item
                        label="所属仓库"
                        prop="wareName"
                        :label-width="formLabelWidth">
                    <el-select v-model="form.wareId" placeholder="请选择仓库" @change="selectChange">
                        <el-option
                                v-for="item in wareHouseList"
                                :label="item.wareName"
                                :value="item.wareName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属负责人" prop="person" :label-width="formLabelWidth">
                    <el-input v-model="form.personId" :disabled="true" placeholder="仓库负责人"></el-input>
                </el-form-item>
                <el-form-item label="货架数目" prop="shelvesNum" :label-width="formLabelWidth">
                    <el-input v-model="form.shelvesNum" placeholder="请输入货架数目" clearable></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="details" :label-width="formLabelWidth">
                    <el-input
                            v-model="form.details"
                            placeholder="请输入描述"
                            type="textarea"
                            maxlength="30"
                            show-word-limit
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="创建时间" prop="deteTime1" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="form.deteTime1"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="resetDialog('form')">重 置</el-button>
                <el-button type="primary" @click="insertCaregoArea('form')">确 认</el-button>
            </div>
        </el-dialog>
    </el-row>

    <!-- 数据显示表格 -->
    <el-table
            border
            :data="tableData"
            style="width: 100%">
        <el-table-column
                fixed="left"
                sortable
                prop="id"
                label="序号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="goodsNo"
                label="货区编号"
                width="120">
        </el-table-column>
        <el-table-column
                prop="goodsName"
                label="货区名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="wareName"
                label="所属仓库"
                width="120">
        </el-table-column>
        <el-table-column
                prop="person"
                label="负责人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="shelvesNum"
                label="货架数目"
                width="120">
        </el-table-column>
        <el-table-column
                prop="totalNum"
                label="货位数目"
                width="120">
        </el-table-column>
        <el-table-column
                prop="details"
                label="描述"
                width="220">
        </el-table-column>
        <el-table-column
                prop="deteTime1"
                label="创建时间"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="状态"
                align="center"
                width="120">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status==1" type="success">已启用</el-tag>
                <el-tag v-else type="warning">未启用</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="180">
            <template slot-scope="scope">
                <el-button v-if="scope.row.status==1" type="success" icon="el-icon-check" size="small"
                           @click="changeStatus(scope.row)"></el-button>
                <el-button v-else type="info" icon="el-icon-close" size="small"
                           @click="changeStatus(scope.row)"></el-button>
                <el-button type="primary" icon="el-icon-edit" size="small"
                           @click="update(scope.row)">编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页文字提示  以及  分页按钮-->
    <el-row type="flex" class="row-bg" justify="space-between" style="padding-top: 10px">
        <el-col :span="6">
            <div class="tips">
                第<span>{{(current - 1) * pageSize + 1}}</span>到第
                <span v-if="current!=(Math.floor(total/pageSize) + 1)">{{(current - 1) * pageSize + pageSize}}</span>
                <span v-else>{{total}}</span>
                条记录,共<span>{{total}}</span>条
            </div>
        </el-col>
        <!--分页-->
        <el-col :span="16" style="text-align: right">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="loadPage"
                    :current-page="current"
                    :page-sizes="[1, 5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>

</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                //查询表单数据
                formInline: {
                    wareName: '',
                    cargoArea: '',
                    createTime: ''
                },
                /*日期选择器设置*/
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                /*表格数据*/
                tableData: [{
                    id: '',//序号
                    goodsNo: '',//货区编号
                    goodsName: '',//货区名称
                    wareName: '',//所属仓库
                    person: '',//负责人
                    shelvesNum: '',//货架数目
                    totalNum: '',//货位数目
                    details: '',//描述
                    deteTime1: '',//创建时间
                    status: '0'//状态
                }],
                /*分页模块*/
                current: 1,//当前页数

                pageSize: 5,//每页显示条目个数

                total: 0,//总条目数

                cargoArea: {//货区状态
                    id: '',
                    status: ''
                },

                dialogFormVisible: false,

                wareHouseList: null,//仓库表集合

                caregoAreaList: null,//库区表集合

                /*对话框表单*/
                form: {
                    id: '',
                    goodsNo: '',//货区编号
                    goodsName: '',//货区名称
                    wareId: '',//仓库名称
                    personId: '',//负责人
                    shelvesNum: '',//货架数目
                    details: '',//描述
                    deteTime1: ''//创建时间
                },
                formLabelWidth: '100px'
            }
        },
        methods: {
            /*查询表单*/
            inlineFormSelect(formName) {//多条件查询
                let a = "1";
                let b = "1";
                //先获取值
                console.log(this[formName]);
                if (this[formName].wareName == "") {
                } else {
                    a = this[formName].wareName
                }
                if (this[formName].cargoArea == "") {
                } else {
                    b = this[formName].cargoArea
                }
                axios.get("/caregoAreas/" + a + "/" + b
                    + "?current=" + this.current + "&pageSize=" + this.pageSize).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.size;
                        this.total = value.data.data.total;
                    }
                })
            },
            inlineFormReset(formName) {//表单重置
                this.$refs[formName].resetFields();
            },
            /*分页模块*/
            handleSizeChange(val) {//每页条数改变
                this.pageSize = val;
                this.loadPage(this.current)
                console.log(`每页 ${val} 条`);
            },
            loadPage(current) {//点击不同页
                this.current = current;
                axios.get("/pageCargoArea?current=" + current + "&pageSize=" + this.pageSize).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.size;
                        this.total = value.data.data.total;
                    }
                })
            },
            /*启用按钮*/
            changeStatus(row) {//切换启用状态
                console.log(row);
                this.cargoArea.id = row.id
                if (row.status == 1) {
                    this.cargoArea.status = 0;
                } else {
                    this.cargoArea.status = 1;
                }
                axios.put("/cargoAreaStatus", this.cargoArea).then(value => {
                    if (value.data.code == 1) {
                        this.loadPage(this.current)
                    }
                }).catch(error => {
                    alert("出错啦")
                })
            },
            update(row) {//修改每一列
                console.log(row);
                this.form = row
                this.form.wareId = row.wareName
                this.form.personId = row.person
                this.dialogFormVisible = true

            },
            /*对话框表单*/
            selectChange(val) {//下拉框修改事件
                console.log(val);//val是当前仓库编号
                axios.get("/warehouses/" + val).then(value => {
                    if (value.data.code == 1) {
                        this.form.personId = value.data.data.person;
                    }
                })
            },
            closeDialog() {//关闭对话框
                this.loadPage(this.current, this.pageSize);
                this.form = {
                    id: '',
                    goodsNo: '',//货区编号
                    goodsName: '',//货区名称
                    wareId: '',//仓库名称
                    personId: '',//负责人
                    shelvesNum: '',//货架数目
                    details: '',//描述
                    deteTime1: ''//创建时间
                }
            },
            resetDialog(formName) {//表单重置
                this.$refs[formName].resetFields();
            },
            insertCaregoArea(formName) {//表单提交
                this.$confirm('此操作将提交表单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '提交成功!',
                        center: true
                    });
                    //确认之后才会执行操作
                    console.log(this[formName]);
                    console.log(typeof this[formName].deteTime1, this[formName].deteTime1);
                    console.log(this.form.id == '')
                    if (this.form.id == '') {
                        axios.post("/cargoArea", this.form).then(value => {
                            if (value.data.code == 1) {
                                this.loadPage(this.current, this.pageSize);
                                this.resetDialog('form');
                                //无论确定或者取消，关闭对话框,并重置表单
                                this.dialogFormVisible = false;
                            }
                        })
                    } else {
                        axios.put("/cargoArea", this.form).then(value => {
                            if (value.data.code == 1) {
                                this.loadPage(this.current, this.pageSize);
                                this.resetDialog('form');
                                //无论确定或者取消，关闭对话框,并重置表单
                                this.dialogFormVisible = false;
                            }
                        })
                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });

            }
        },
        mounted() {
            this.loadPage(1),
                //查询所有仓库
                axios.get("/warehouses").then(value => {
                    if (value.data.code == 1) {
                        this.wareHouseList = value.data.data;
                    }
                }).catch(error => {
                    alert("出错啦")
                })
            //查询所有库区
            axios.get("/caregoAreas").then(value => {
                if (value.data.code == 1) {
                    this.caregoAreaList = value.data.data;
                }
            }).catch(error => {
                alert("出错啦")
            })
        }
    })
</script>
</body>
</html>